<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
</head>
<body>
<figure>
    <figcaption>放大镜</figcaption>

    <div class="circle"></div>
    <div class="bar"></div>
</figure>
<style>
    .circle {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        border: 20px solid black;
        background: lightblue;
    }
    .bar{
        width: 30px;
        height: 330px;
        background: black;
        transform: rotate(-20deg) translate(190px,60px);
        border-radius: 0px 0px 10px 10px;
    }

</style>
</body>
</html>